<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>对接插件配置页</title>
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<style>
    body {
        background: #f4f6fa;
    }

    .main-card {
        max-width: 1300px;
        margin: 20px auto 0 auto;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        padding: 36px 40px 40px 40px;
    }

    .title {
        text-align: center;
        font-size: 2.2em;
        font-weight: bold;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }

    .divider {
        border: none;
        border-top: 2px solid #009688;
        width: 60px;
        margin: 0 auto 24px auto;
    }

    .alert-card, .info-card {
        display: flex;
        align-items: flex-start;
        border-radius: 4px;
        padding: 18px 22px;
        margin-bottom: 18px;
        font-size: 16px;
    }

    .alert-card {
        background: #fff0f0;
        color: #d32f2f;
        border-left: 5px solid #d32f2f;
    }

    .info-card {
        background: #f0fff4;
        color: #388e3c;
        border-left: 5px solid #388e3c;
    }

    .alert-card .layui-icon, .info-card .layui-icon {
        font-size: 22px;
        margin-right: 10px;
        margin-top: 2px;
    }

    .btn-group {
        text-align: center;
        margin: 24px 0 32px 0;
    }

    .btn-group .layui-btn {
        margin: 0 12px;
        min-width: 120px;
        font-size: 16px;
    }

    .layui-table-view {
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
</style>
<body>
<div class="main-card">
    <div class="title">平台对接插件配置页</div>
    <hr class="divider"/>
    <div class="alert-card">
        <i class="layui-icon layui-icon-about"></i>
        <div>
            <b>未在专人指导下，请勿修改配置信息！</b><br>
            未在专人指导下，请勿修改配置信息！未在专人指导下，请勿修改配置信息！
        </div>
    </div>
    <div class="info-card">
        <i class="layui-icon layui-icon-tips"></i>
        <div>
            如果当天插件没有自动上传测温信息，请点击 <b>手动上传</b>，返回成功后，20分钟后在平台查看。<br>
            如果手动上传报错，请检查云盒是否正常，重启云盒或者联系技术人员反馈！
        </div>
    </div>
    <div class="btn-group">
        <button class="layui-btn layui-bg-blue" id="addBtn"><i class="layui-icon layui-icon-add-1"></i> 新增配置</button>
        <button class="layui-btn" id="showListBtn"><i class="layui-icon layui-icon-upload"></i> 手动上传</button>
    </div>
    <table class="layui-hide" id="customeTable" lay-filter="customeTable"></table>
</div>
<script src="layui/layui.js"></script>
<!-- 弹窗表单 -->
<script type="text/html" id="tanchuanForm">
    <form class="layui-form" lay-filter="tcForm" style="padding:20px;">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">仓房名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">货位代码</label>
            <div class="layui-input-block">
                <input type="text" name="hwdm" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">行列层</label>
            <div class="layui-input-inline">
                <input type="text" name="param" placeholder="请输入" class="layui-input">
            </div>
            <div class="layui-form-mid layui-text-em">示例:10,10,5 10行10列5层</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitUser">提交</button>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        // 渲染表格
        function renderTable() {
            // 查询接口
            fetch('/api/house/list')
                .then(res => res.json())
                .then(res => {
                    // 假设返回 { code: 0, data: [...] }
                    table.render({
                        elem: '#customeTable',
                        cols: [ [
                            {field: 'id', title: 'ID', width: 80},
                            {field: 'name', title: '仓房名称'},
                            {field: 'hwdm', title: '货位代码'},
                            {field: 'param', title: '行列层'},
                            {field: 'createTime', title: '创建时间'},
                            {title: '操作', toolbar: '#barDemo', width: 130}
                        ] ],
                        data: res.data || [],
                        page: true
                    });
                });
        }

        renderTable();
        // 新增
        document.getElementById('addBtn').onclick = function () {
            openForm('新增用户');
        };
        // 表格工具栏事件
        table.on('tool(customeTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                openForm('编辑用户', data);
            } else if (obj.event === 'del') {
                layer.confirm('确定删除吗？', function (index) {
                    // 删除接口
                    fetch('/api/house/' + data.id, {
                        method: 'DELETE'
                    })
                        .then(res => res.json())
                        .then(res => {
                            if (res.code === 200) {
                                layer.msg('删除成功');
                                renderTable();
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                            layer.close(index);
                        });
                });
            }
        });

        // 打开表单弹窗
        function openForm(title, data) {
            layer.open({
                type: 1,
                title: title,
                area: ['600px', '400px'],
                content: document.getElementById('tanchuanForm').innerHTML,
                success: function (layero, index) {
                    if (data) {
                        form.val('tcForm', data);
                    } else {
                        form.val('tcForm', {id: '', name: '', hwdm: '', param: ''});
                    }
                    // 提交事件
                    form.on('submit(submitUser)', function (formData) {
                        var field = formData.field;
                        if (field.id) {
                            // 编辑接口
                            fetch('/api/house/' + field.id, {
                                method: 'PUT',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({name: field.name, hwdm: field.hwdm, param: field.param})
                            })
                                .then(res => res.json())
                                .then(res => {
                                    console.log(res);
                                    if (res.code === 200) {
                                        layer.msg('编辑成功');
                                        renderTable();
                                        layer.close(index);
                                    } else {
                                        layer.msg(res.msg || '编辑失败');
                                    }
                                });
                        } else {
                            // 新增接口
                            fetch('/api/house', {
                                method: 'POST',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({name: field.name, hwdm: field.hwdm, param: field.param})
                            })
                                .then(res => res.json())
                                .then(res => {
                                    if (res.code === 200) {
                                        layer.msg('新增成功');
                                        renderTable();
                                        layer.close(index);
                                    } else {
                                        layer.msg(res.msg || '新增失败');
                                    }
                                });
                        }
                        return false;
                    });
                }
            });
        }

        // 请求弹窗
        document.getElementById('showListBtn').onclick = function () {
            fetch('/api/house/list')
                .then(res => res.json())
                .then(res => {
                    // 假设返回 { code: 0, data: [...] }
                    // 你可以根据实际返回格式调整
                    var content = JSON.stringify(res, null, 2);
                    layer.open({
                        type: 1,
                        title: '接口返回结果',
                        area: ['800px', '600px'],
                        content: `<pre style="padding:20px;">${content}</pre>`
                    });
                })
                .catch(err => {
                    layer.alert('请求失败: ' + err);
                });
        }
    });
</script>
</body>
</html>
